@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.item {
  display: flex;
  margin: 0 px2rem(20);
  padding: px2rem(20) 0;
  font-size: px2rem(14);
  line-height: px2rem(24);
  color: $fontBlack;
  border-top: 1px dashed #dedede;

  &:first-child {
    border: 0;
  }

  .image {
    width: px2rem(100);
    height: px2rem(100);
  }

  .body {
    margin-left: px2rem(20);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .title {
      color: $fontBlack;
      font-size: px2rem(14);
      line-height: px2rem(24);
      width: 248px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .specs {
      display: flex;
      color: #999;
      padding-top: px2rem(9);
      line-height: px2rem(16);
      text-align: left;
      font-size: px2rem(12);

      .spec {
        margin-right: px2rem(6);
      }
    }
  }

  .price {
    margin-left: px2rem(80);
  }

  .quantity {
    margin-left: px2rem(150);
  }

  .totalPrice {
    margin-left: px2rem(170);
  }

  .final {
    margin-left: px2rem(160);
  }
}
